<template>
  <div id="app">
    <header>
      <van-nav-bar
        :title="topTitle"
        ref="goBack"
        :left-text="goBack"
        :left-arrow="flag"
        @click-left="onClickLeft"
      />
    </header>
    <main>
      <!-- 自定义方法接收数据 -->
      <router-view class="box" @sendToFather="getSonText" ref="getChildren" />
    </main>
    <footer>
      <van-tabbar v-model="active" route ref="reAddStyle">
        <!-- 子元素要添加value值  用来给topTitle 赋值 -->
        <van-tabbar-item replace to="/home" name="home" icon="home-o" value="首页">首页</van-tabbar-item>
        <van-tabbar-item replace to="/search" name="search" icon="search" value="搜索">搜索</van-tabbar-item>
        <van-tabbar-item replace to="/message" name="message" icon="friends-o" value="消息">消息</van-tabbar-item>
        <van-tabbar-item replace to="/setting" name="setting" icon="setting-o" value="我的">我的</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
// import { Toast } from "vant";

export default {
  data() {
    return {
      active: "home",
      isRouterAlive: true,
      goBack: "",
      flag: false,
      topTitle: "首页"
    };
  },
  methods: {
 
    onClickLeft() {
      this.$router.go(-1);
      // 设置tabTop 的值 跟 tabbar的值一致
      // 1.获取当前上一级地址
      const nowAdd = this.$route.path.split("/");

      const tabBarHash = nowAdd[nowAdd.length - 2];
      const allHash = {
        // home:'主页',
        goToWork: "上班打卡",
        allWorkList: "考勤"
      };
      this.topTitle = allHash[tabBarHash];
    },
    //接收子组件的值
    getSonText(text) {
      this.topTitle = text;
    }
  },
  watch: {
    $route(to) {
      this.$nextTick(() => {
        const tabBarHash = to.path.split("/")[1];

        const AddStyle = this.$refs.reAddStyle.$children;

        this.goBack = to.path.split("/").length > 2 ? "返回" : "";
        if (to.path.split("/").length > 2) {
          this.goBack = "返回";
          this.flag = true;
        } else {
          this.goBack = "";
          this.flag = false;
        }
        for (let index = 0; index < AddStyle.length; index++) {
          const ele = AddStyle[index];
          if (ele._props.name === tabBarHash) {
            // 如果地址跟当前item的name 一致 就给他添加一个class   van-tabbar-item--active   属性
            ele.$el.className = "van-tabbar-item van-tabbar-item--active";
            if (to.path.split("/").length <= 2) {
              this.topTitle = ele.$attrs.value;
            }
          } else {
            //否则就把这个属性删除掉  即可
            ele.$el.className = "van-tabbar-item";
          }
        }
      });
      // console.log(this.active);
    }
  }
};
</script>

<style scoped>
#app {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  max-width: 414px;
  margin: 0 auto;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
header {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}
header,
footer {
  width: 100%;
  height: 50px;
}
main {
  flex: 1;
  margin-top: 50px;
}
</style>
   

